<template>
  <div class="header-bar" :class="getTheme()">
    <div class="header-bar-left">
      <sider-trigger :collapsed="collapsed" icon="ios-menu-outline" @on-change="handleCollpasedChange" :theme="theme"
        v-if="showMenu">
      </sider-trigger>

      <img src="../../../../assets/images/logo.png" class="logo" v-if="!showMenu" key="max-logo" />

      <div v-if="orgName.length!=0" style="margin-left:46px;font-weight:bold;font-size:15px;">{{orgName}}</div>

      <!-- <refresh-button icon="ios-refresh" :theme="theme" @on-refresh="handleRefresh"></refresh-button> -->
      <custom-bread-crumb show-icon v-show="!isPhone&&needBread" :list="breadCrumbList" :theme="theme"
        style="margin-left:12px">
      </custom-bread-crumb>
    </div>
    <div class="header-bar-right">
      <slot></slot>
    </div>
  </div>
</template>
<script>
  import siderTrigger from "./sider-trigger";
  import refreshButton from './refresh-button'
  import customBreadCrumb from "./custom-bread-crumb";
  import "./header-bar.less";
  export default {
    name: "HeaderBar",
    components: {
      siderTrigger,
      customBreadCrumb,
      refreshButton
    },
    props: {
      collapsed: Boolean,
      theme: {
        type: String,
        default: 'light',
      },
      showMenu: Boolean,
      isPhone: {
        type: Boolean,
        default: false
      },
      needBread: {
        type: Boolean,
        default: true
      },
      orgName: {
        type: String,
        default: ""
      }
    },
    computed: {
      breadCrumbList() {
        return this.$store.state.app.breadCrumbList;
      }
    },
    methods: {
      handleCollpasedChange(state) {
        this.$emit("on-coll-change", state);
      },
      handleRefresh() {
        this.$emit('on-refresh')
      },
      getTheme() {
        var key = this.theme;
        switch (key) {
          case 'light':
            return 'light'
            break;
          case 'dark':
            return 'dark'
            break;
          default:
            return ''
            break;
        }
      }
    }
  };
</script>